<template>
  <view @click="navToDetailPage(itemContent)" class="shop-item">
    <image class="shop-item-img" :src="itemContent.coverImgUrl" mode=""></image>
    <view class="shop-item-cont">
      <view class="name multi-ellipsis-2">{{ itemContent.title }}</view>
      <view class="price">
        <view class="price-num">
          <text>￥</text>
          <text class="f36">{{ itemContent.retailPrice }}</text>
        </view>
        <view class="price-people"> {{ itemContent.salesVolume }}人付款 </view>
      </view>
      <view class="shopping">
        <view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseShopItem',
  props: {
    itemContent: {
      type: Object,
      default() {
        return {
          categoryId: '402149626901303296',
          couponCondition: '慢300减30',
          coverImgUrl:
            'http://192.168.10.99:8191/profile/upload/2022/01/27/333b23fe-c142-4663-b440-5942e4a1c85f.jpg',
          id: '406843066809454592',
          marketPrice: 10000,
          retailPrice: 2000,
          salesVolume: 100,
          subTitle: null,
          supplierId: '401060091949879296',
          title: '万曼双水平呼吸机家用三水平睡眠呼吸机',
        }
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    //详情
    navToDetailPage(item) {
      console.log(item, '跳转到详情')
      //测试数据没有写id，用title代替
      let id = item.id
      uni.navigateTo({
        url: `/pages/product/product?id=${id}&supplierId=${item.supplierId}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/static/scss/common.scss';
.shop-item {
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 346rpx;
  &-img {
    width: 346rpx;
    height: 346rpx;
    background: linear-gradient(180deg, #ffffff 0%, #e6e7eb 100%);
    border-radius: 20rpx;
  }
  &-cont {
    width: 300rpx;
    margin: 12rpx 16rpx;
    .name {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      height: 72rpx;
      color: #121212;

      margin-right: 0;
    }
    .price {
      display: flex;
      align-items: flex-end;
      margin: 20rpx 0 8rpx 0;
      font-size: 22rpx;
      line-height: 100%;
      &-num {
        color: $base-color-shop;
        margin-right: 16rpx;
        .f36 {
          font-size: 36rpx;
        }
      }
      &-people {
        font-size: 24rpx;
        color: #999999;
      }
    }
    .shopping {
      display: flex;
      justify-content: space-between;
      .sale {
        display: inline-block;
        height: 32rpx;
        line-height: 32rpx;
        padding: 0 12rpx;
        font-size: 22rpx;
        color: #ff8000;
        background: rgba($color: #ff8000, $alpha: 0.12);
        border-radius: 6rpx;
      }
      .buy {
        width: 48rpx;
        height: 48rpx;
        &-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
